<template>
  <!-- 我的订单页面 -->
  <view class="main">
    <view class="xian_d"></view>
    <scroll-view scroll-x="true" class="bookshelf-content">
      <view class="top_tab">
        <view
          :class="[activeIndex == i ? 'top_item top_active' : 'top_item']"
          v-for="(v, i) in [
            '全部',
            '待发货',
            '待收货',
            '已完成',
            '平台处理中',
            '已退款',
          ]"
          :key="i"
          @tap="handleActive(i)"
        >
          <text>{{ v }}</text>
          <view class="xian_xia"></view>
        </view>
      </view>
    </scroll-view>
    <view class="xian_d"></view>
    <!-- 空状态显示 -->
    <view class="wu_Huo" v-if="goodsOrder.length == 0">
      <image src="../../imges/liebiaowu.png" mode="aspectFill"></image>
      <text>暂无记录</text>
    </view>
    <view class="list_">
      <view class="list_item" v-for="(item, index) in goodsOrder" :key="index">
        <view class="item_">
          <navigator
            :url="'/pages/index/trickDetail?id=' + item.msgId"
            hover-class="none"
          >
            <view class="top_o">
              <view class="left_"> 订单编号：{{ item.orderCode }} </view>
              <view class="right_" v-if="item.orderStatus == 1"> 待发货 </view>
              <view class="right_" v-if="item.orderStatus == 2"> 待收货 </view>
              <view class="right_" v-if="item.orderStatus == 3">
                交易成功
              </view>
              <view class="right_" v-if="item.orderStatus == 4">
                平台处理中
              </view>
              <view class="right_" v-if="item.orderStatus == 6"> 已退款 </view>
              <view class="right_" v-if="item.orderStatus == 0"> 初始态 </view>
            </view>
            <view class="top_t">
              <view class="left_">
                <image :src="item.goodsImg" mode="aspectFill"></image>
              </view>
              <view class="right_">
                <view class="one_">
                  {{ item.goodsName }}
                </view>
                <view class="two_">
                  ¥{{ item.goodsPrice }} <text>x{{ item.goodsNums }}</text>
                </view>
              </view>
            </view>
            <view class="top_h">
              <view class="left_">
                <image :src="item.orgUrl" mode="aspectFill"></image>
                <text>{{ item.orgName }}</text>
              </view>
              <view class="right_">
                合计：¥{{ item.goodsPrice * item.goodsNums }}
              </view>
            </view>
          </navigator>
          <view class="top_b">
            <navigator
              :url="
                '/pages/webGoods/complaint?id=' +
                item.id +
                '&businessUid=' +
                item.businessUid
              "
              class="jubao"
              hover-class="none"
              v-if="
                item.isCalculation == 0 &&
                item.orderStatus != 4 &&
                item.orderStatus != 6 &&
                item.isReport == 0
              "
            >
              投诉
            </navigator>
            <navigator
              :url="'/pages/my_circle/report?id=' + item.id + '&type=2'"
              class="jubao"
              hover-class="none"
              v-if="
                item.isCalculation == 1 &&
                item.orderStatus != 4 &&
                item.orderStatus != 6 &&
                item.isReport == 0
              "
            >
              反馈
            </navigator>
            <navigator
              :url="
                '/pages/webGoods/myOrderDetail?id=' +
                item.id +
                '&tieId=' +
                item.msgId +
                '&isReport=' +
                item.isReport
              "
              class="detail"
              hover-class="none"
            >
              详情
            </navigator>
            <view
              class="shouhuo"
              v-if="item.orderStatus == 2"
              @tap="handleShou(item.id)"
            >
              确定收货
            </view>
            <navigator
              :url="
                '/pages/webGoods/payConfirmation?id=' +
                item.goodsInfoId +
                '&tieziId=' +
                item.msgId
              "
              class="yidan"
              v-if="item.orderStatus == 3"
              hover-class="none"
            >
              再来一单
            </navigator>
          </view>
        </view>
        <view class="xian_d"></view>
      </view>
    </view>
  </view>
</template>
<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      activeIndex: 0,
      orderStatus: 100,
      bottom: false,
      noMore: false,
      pageSize: 10,
      goodsOrder: [],
    };
  },
  onLoad() {
    this.handleList();
  },
  onShow() {
    this.bottom = false;
    this.handleList();
  },
  onReachBottom() {
    this.bottom = true;
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    this.handleList();
  },
  onPullDownRefresh() {
    this.bottom = false;
    this.noMore = false;
    this.pageSize = 10;
    this.handleList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 1000);
  },
  methods: {
    handleShou(id) {
      uni.showModal({
        title: "提示",
        content:
          "确定收货后交易将结束，请确定是否已收到货物，且货物没有质量问题？",
        success: (re) => {
          if (re.confirm) {
            let token = uni.getStorageSync("token");
            // console.log(token, 'token')
            if (!token) {
              uni.showToast({
                title: "请授权登录再操作！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              request({
                url: "app/goods/orderConfirmReceipt",
                method: "POST",
                header: {
                  "Content-Type": "application/json",
                  "api-client": "72e0fee8172411ea995200163e05ff66",
                  "api-version": "1.3.3",
                  "Source-Type": 7,
                  token: token,
                },
                data: {
                  id: id,
                },
              }).then((res) => {
                if (res.data.code == 200) {
                  uni.showToast({
                    title: "收货成功",
                    duration: 2000,
                    icon: "none",
                  });
                  this.handleList();
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            }
          }
        },
      });
    },
    handleActive(i) {
      this.bottom = false;
      this.activeIndex = i;
      if (i == 0) {
        this.orderStatus = 100;
        this.handleList();
        return false;
      } else if (i == 5) {
        this.orderStatus = 6;
        this.handleList();
        return false;
      } else {
        this.orderStatus = i;
        this.handleList();
      }
    },
    handleList() {
      //订单列表
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "/app/goods/buyerOrderList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orderStatus: this.orderStatus,
            pageNumber: 1,
            pageSize: this.pageSize,
          },
        }).then((res) => {
          // console.log(res, '列表')
          if (res.data.code == 200) {
            this.goodsOrder = res.data.data.rows;
            if (res.data.data.total == 0) {
              return false;
            }
            if (
              this.bottom &&
              res.data.data.total <= this.goodsOrder.length &&
              !this.noMore
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (
              this.bottom &&
              this.goodsOrder.length != 0 &&
              res.data.data.total <= this.goodsOrder.length
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            } else if (
              this.bottom &&
              this.goodsOrder.length != 0 &&
              res.data.data.total > this.goodsOrder.length
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1500,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
.main {
  .wu_Huo {
    padding-top: 260rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      margin-top: -60rpx;
      width: 600rpx;
      height: 500rpx;
    }

    text {
      // margin-top: -60rpx;
      display: inline-block;
      position: relative;
      top: -120rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }

  .list_ {
    padding-bottom: 30rpx;

    .list_item {
      .item_ {
        padding: 31rpx 25rpx;

        .top_o {
          display: flex;
          justify-content: space-between;
          padding-bottom: 23rpx;

          .left_ {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2a2a2a;
          }

          .right_ {
            font-size: 28rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #fb4566;
          }
        }

        .top_t {
          display: flex;
          align-items: center;

          .left_ {
            width: 130rpx;
            height: 130rpx;
            background: #d8d8d8;
            border-radius: 8rpx;
            overflow: hidden;
            margin-right: 24rpx;
            flex-shrink: 0;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .right_ {
            display: flex;
            height: 100rpx;
            flex-direction: column;
            justify-content: space-between;

            .one_ {
              font-size: 28rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2a2a2a;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .two_ {
              font-size: 30rpx;
              font-weight: bold;
              color: #2a2a2a;
              display: flex;

              text {
                display: flex;
                margin-left: 15rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #2a2a2a;
                margin-top: 3rpx;
              }
            }
          }
        }

        .top_h {
          margin-top: 35rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left_ {
            display: flex;
            align-items: center;

            image {
              width: 50rpx;
              height: 50rpx;
              background: #d8d8d8;
              border-radius: 50%;
              margin-right: 15rpx;
            }

            text {
              font-size: 26rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #404759;
            }
          }

          .right_ {
            font-size: 24rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #2a2a2a;
          }
        }

        .top_b {
          display: flex;
          justify-content: flex-end;
          padding-top: 20rpx;

          .jubao,
          .detail {
            width: 140rpx;
            height: 60rpx;
            background: #ffffff;
            border-radius: 30rpx;
            border: 2rpx solid #979797;
            line-height: 58rpx;
            text-align: center;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2a2a2a;
            box-sizing: border-box;
            margin-left: 28rpx;
          }

          .shouhuo,
          .yidan {
            margin-left: 28rpx;
            width: 140rpx;
            height: 60rpx;
            background: #3165ec;
            border-radius: 30rpx;
            text-align: center;
            line-height: 60rpx;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }
      }
    }
  }

  .xian_d {
    background-color: #f7f7f7;
    height: 15rpx;
    width: 750rpx;
  }

  .top_tab {
    white-space: nowrap; // 滚动必须加的属性
    width: 835rpx;
    padding: 29rpx 25rpx;
    display: flex;

    .top_item {
      margin-right: 51rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #999999;
    }

    .top_active {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;

      .xian_xia {
        margin-top: 3rpx;
        width: 36rpx;
        height: 6rpx;
        background: #2168eb;
        border-radius: 3rpx;
      }
    }
  }
}
</style>
